<div class="code-line" [ngStyle]="{'padding-left.px': level > 0 ? 20 : 0}" *ngIf="mockConfigItem">
    <ng-container *ngIf="mockConfigItem.key">
        <div class="key-span display-inline-block">
            <label>
                <input type="checkbox" [checked]="mockConfigItem.available" [(ngModel)]="mockConfigItem.available">
                <span class="key" *ngIf="mockConfigItem.key">"{{mockConfigItem.key}}"</span><span>: </span>
            </label>
            <span class="obj-start" *ngIf="mockConfigItem.type === 3">[</span>
        </div>

        <ng-container *ngIf="mapIndex>=0">
            <div *ngIf="mockConfigItem.edit" class="mock-item-value">
                <input class="input input-lean" [(ngModel)]="mapKey">
                <button class="btn lean-btn" (click)="saveMapKey()">保存</button>
                <button class="btn lean-btn" (click)="exitMapKey()">取消</button>
            </div>
            <div *ngIf="!mockConfigItem.edit" class="mock-item-value">
                <button class="btn lean-btn" (click)="editMapKey()">修改map key</button>
                <button class="btn lean-btn" (click)="delMapItem(mapIndex)">删除map元素</button>
            </div>
        </ng-container>
    </ng-container>

    <ng-container *ngIf="mockConfigItem.type===0 || mockConfigItem.type===1">
        <!-- 基本类型或枚举类型 -->
        <div class="mock-item-value" *ngIf="!mockConfigItem.edit">
            <span [className]="'value base-value base-value-' + mockConfigItem.baseType" [innerText]="getMockConfigText(mockConfigItem, 28)"></span>
            <span *ngIf="!isLast" class="code-line-end">,</span>
            <button class="btn lean-btn ml-1" (click)="mockConfigItem.edit=true">编辑</button>
        </div>
        <app-doc-mock-item-config *ngIf="mockConfigItem.edit" [mockConfigItem]="mockConfigItem"></app-doc-mock-item-config>
    </ng-container>



    <!-- 实体 -->
    <ng-container *ngIf="mockConfigItem.type === 2">
        <div class="code-line">
            <input type="checkbox" *ngIf="showAvailableCheckbox" [checked]="mockConfigItem.available" [(ngModel)]="mockConfigItem.available">
            <span class="obj-start">{{'{'}}</span>
            <span class="tips" *ngIf="mockConfigItem.loaded"> //循环嵌套:{{mockConfigItem.entityName|simpleEntityName:true}}</span>
            <div class="mock-item-value display-inline-block" *ngIf="mockConfigItem.loaded && mockConfigItem.children">
                <button *ngIf="mockConfigItem.children.length === 0" class="btn lean-btn ml-1" (click)="recoverEntity(mockConfigItem.entityName)">恢复</button>
                <button *ngIf="mockConfigItem.children.length > 0" class="btn lean-btn ml-1" (click)="hideEntity(mockConfigItem.entityName)">删除</button>
            </div>
        </div>
        <ng-container *ngFor="let item of mockConfigItem.children; let last=last;">
            <app-doc-mock-rest-config [mockConfigItem]="item" [level]="level + 1" [isLast]="last" [loopedEntityMap]="loopedEntityMap"></app-doc-mock-rest-config>
        </ng-container>
        <div class="code-line">
            <span class="obj-end">{{'}'}}</span><span *ngIf="!isLast" class="code-line-end">,</span>
        </div>
    </ng-container>



    <!-- collection -->
    <ng-container *ngIf="mockConfigItem.type === 3">
        <div class="mock-item-value" *ngIf="!mockConfigItem.edit">
            <span class="value collection-value" [innerText]="getMockConfigText(mockConfigItem)"></span>
            <button class="btn lean-btn ml-1" (click)="mockConfigItem.edit=true">编辑</button>
        </div>
        <app-doc-mock-item-config *ngIf="mockConfigItem.edit" [mockConfigItem]="mockConfigItem"></app-doc-mock-item-config>
        <br>
        <ng-container *ngFor="let item of mockConfigItem.children; let last=last;">
            <app-doc-mock-rest-config
                [mockConfigItem]="item"
                [level]="level + 1"
                [isLast]="last"
                [loopedEntityMap]="loopedEntityMap"
                [showAvailableCheckbox]="true"
            ></app-doc-mock-rest-config>
        </ng-container>
        <span class="obj-end">]</span>
    </ng-container>


    <!-- MAP -->
    <ng-container *ngIf="mockConfigItem.type === 4">
        <div class="code-line">
            <div class="mock-item-value display-inline-block">
                <span class="obj-start">{{'{'}}</span>
                <button class="btn lean-btn ml-1" (click)="mockConfigItem.edit=true">添加map元素</button>
            </div>
        </div>
        <app-doc-mock-item-config *ngIf="mockConfigItem.edit" [mockConfigItem]="mockConfigItem"></app-doc-mock-item-config>
        <ng-container *ngFor="let item of mockConfigItem.children; let last=last; let index=index;">
            <ng-container *ngIf="item.key">
                <input type="checkbox" *ngIf="showAvailableCheckbox" [checked]="mockConfigItem.available" [(ngModel)]="mockConfigItem.available" />
                <app-doc-mock-rest-config
                    *ngIf="item.key"
                    [mockConfigItem]="item"
                    [level]="level + 1"
                    [isLast]="last"
                    [mapIndex]="index"
                    [loopedEntityMap]="loopedEntityMap"
                    (mapItemDeleteAction)="deleteMap($event)"
                ></app-doc-mock-rest-config>
            </ng-container>
        </ng-container>
        <div class="code-line">
            <span class="obj-end">{{'}'}}</span><span *ngIf="!isLast" class="code-line-end">,</span>
        </div>
    </ng-container>
</div>
